import {uSelectMyDevShareDetailed} from '@/api/deviceShare'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import {getUserId} from '@/libs/auth'
import {ShareDeviceCard} from './components/deviceCard'

export default defineComponent({
  name: 'dataOverview',
  setup() {
    const state = reactive<{
      shareDetails: DeviceShare.ShareDetail[]
      spinning: boolean
    }>({
      shareDetails: [],
      spinning: false
    })

    function getShareDetail() {
      const userId = getUserId()
      if (!userId) return
      state.spinning = true
      uSelectMyDevShareDetailed({userId})
        .then(res => {
          state.shareDetails = res.data.sort((a, b) => a.devId - b.devId)
          state.spinning = false
        })
        .catch(err => {})
    }
    onMounted(() => {
      getShareDetail()
    })
    return () => (
      <div class='pb-21'>
        <CnBoldP class='mt-11 text-20'>设备分享</CnBoldP>

        <CnNormalP class='mt-6 mb-8 text-4xText'>
          将属于您的设备分享给他人查看数据并设置，或接收他人分享给您的设备
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>

        <a-spin spinning={state.spinning}>
          <div class='grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-3 gap-x-21 gap-y-21 space-y-8'>
            {state.shareDetails.map(item => (
              <ShareDeviceCard shareDetail={item} onFinish={getShareDetail}></ShareDeviceCard>
            ))}
          </div>
        </a-spin>
      </div>
    )
  }
})
